<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <style>
      .tsetDiv {
        width: 40px;
        height: 40px;
        border-radius: 100%;
        font-size: 0;
        display: inline-block;
        margin-left: 10px;
        vertical-align: middle;
      }
      #boxF {
        width: 300px;
        font-size: 0;
        height: auto;
      }
    </style>
  </head>
  <body>
    <div id="boxF"></div>
    <script type="text/javascript">
      var boxf = document.getElementById('boxF');
      var divC = null;
      var r = 255;
      var g = 0;
      var b = 0;
      for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 10; j++) {
          divC = document.createElement('div');
          divC.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';

          divC.setAttribute('class', 'tsetDiv');
          boxf.appendChild(divC);
        }
        //修改r g b加的不同值可以得到不同的效果 rgb最大值为255 所以不用担心超过不显示
        // r += 15;
        g += 25;
        b += 35;
      }
    </script>
  </body>
</html>
